<div class="layui-card">
    <div class="layui-card-header">
        <include src="pages/common/breadcrumb.html"/>
    </div>

    <div class="layui-card-body">
        <div class="toolbar">
            <form id="search-form" class="layui-form ">
                <div class="layui-form-item">
                    <input type="hidden" name="isHistory" value="0"/>
                    <div class="layui-inline">
                        <label class="layui-form-label">客户昵称：</label>
                        <div class="layui-input-inline ">
                            <input name="userName" class="layui-input" maxlength="20" placeholder="输入客户昵称">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">咨询时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="startTime" id="c_startDate" class="layui-input "
                                   placeholder="开始时间" readonly/>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="endTime" id="c_endDate" class="layui-input " placeholder="结束时间"
                                   readonly/>
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand ">
                        <label class="layui-form-label">接入渠道：</label>
                        <div class="layui-input-inline ">
                            <input name="userSource" class="layui-input" maxlength="20" placeholder="输入接入渠道">
                        </div>
                    </div>
                    <div class="layui-inline  form-search-show-expand">
                        <label class="layui-form-label">坐席昵称：</label>
                        <div class="layui-input-inline ">
                            <input name="csName" class="layui-input" maxlength="20" placeholder="输入坐席昵称">
                        </div>
                    </div>
                    <div class="layui-inline form-search-show-expand">
                        <label class="layui-form-label">服务时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="serviceStartTime" id="s_startDate" class="layui-input "
                                   placeholder="开始时间" readonly/>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="serviceEndTime" id="s_endDate" class="layui-input "
                                   placeholder="结束时间" readonly/>
                        </div>
                    </div>


                    <div class="layui-inline pl20">
                        <button class="layui-btn" data-method="doQuery" type="button">
                            查询
                        </button>
                        <a class="layui-btn layui-btn-primary form-search-expand" data-expand="true">
                            展开 <i class="layui-icon layui-icon-down"></i>
                        </a>
                    </div>


                </div>

            </form>
        </div>
        <!-- 数据表格 -->
        <table class="layui-table theme-table" id="app-table" lay-filter="app-table"></table>
    </div>
</div>

<script>

    var methods;
    layui.use(['tools', 'form', 'table', 'util', 'setter', 'admin', 'laydate'], function () {
        var form = layui.form;
        var tools = layui.tools;
        var table = layui.table;
        var laydate = layui.laydate;
        var config = layui.setter;
        laydate.render({
            elem: '#c_startDate',
            type: 'datetime'
        })
        laydate.render({
            elem: '#c_endDate',
            type: 'datetime'
        })
        laydate.render({
            elem: '#s_startDate',
            type: 'datetime'
        })
        laydate.render({
            elem: '#s_endDate',
            type: 'datetime'
        })
        tools.includeHtml(function () {
            $(this).vm({"headerTitle": "当前会话"});
        });
        var now = new Date();
        //执行方法
        methods = {
            doQuery: function (obj) {
                table.reload('app-table', {where: tools.serialize(), page: {curr: 1}});
            },
            tableRender: function () {
                // 渲染表格
                table.render({
                    elem: '#app-table',
                    url: "/plm/api/im/csSession/page",
                    method: 'GET',
                    where: tools.serialize(),
                    page: true,
                    cols: [[
                        {field: 'userNick',  title: '客户昵称', width: 150},
                        {field: 'csNick', title: '坐席昵称', width: 150},
                        {
                            field: 'status',
                            width: 100,
                            title: '会话状态',
                            unresize: true,
                            templet: function (d) {
                                var text = ""
                                if (d.status ==1) {
                                    text = "服务中"
                                } else if (d.status == 2) {
                                    text = "队列中"
                                } else if (d.status == 3) {
                                    text = "结束"
                                }
                                return text;
                            }
                        },
                        {field: 'csOrgName', width: 100, title: '客服组', unresize: true},
                        {
                            field: 'userSource',
                            width: 100,
                            title: '接入渠道',
                            unresize: true,
                            templet: function (d) {
                                var text = "OTHER";
                                if (d.userSource == 1) {
                                    text = "H5"
                                } else if (d.userSource == 2) {
                                    text = "WEIXIN"
                                } else if (d.userSource == 3) {
                                    text = "APP"
                                } else if (d.userSource == 4) {
                                    text = "短信"
                                } else if (d.userSource == 5) {
                                    text = "SKYPE"
                                }
                                return text;
                            }
                        },
                        {field: 'beginTime', sort: true, title: '客户消息时间', width: 200},
                        {field: 'userLastTime', sort: true, title: '客户最后消息时间', width: 200},
                        {field: 'csFirstTime', sort: true, title: '坐席消息时间', width: 200},
                        {field: 'csLastTime', sort: true, title: '坐席最后消息时间', width: 200},
                        {
                            field: 'inTime', sort: true, title: '等待时长', width: 150, templet: function (d) {
                                var inTimeValue=d.inTimeValue;
                                if(inTimeValue){
                                    return  inTimeValue;
                                }else{
                                    return ""
                                }
                            }
                        },
                        {field: '', sort: true, title: '服务时长', width: 150,templet:function (d) {
                                 var waitTimeValue=d.waitTimeValue;
                                 if(waitTimeValue){
                                     return waitTimeValue;
                                 }else {
                                     return  "";
                                 }
                            }},
                        {field: 'region', sort: true, title: 'IP', width: 150},

                    ]],
                    done: function () {


                    }
                });
            }

        }
        methods.tableRender();
    });


</script>


